<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>答题</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css">
		<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
		<script src="../js/mui.min.js"></script>
		<style type="text/css">
			.header p.header_title{
				 font-size: 16px;
			    letter-spacing: 2px;
			    /* line-height: 30px; */
			    /* padding: 30px 0 10px 0; */
			    width: 40%;
			    height: 40px;
			    line-height: 40px;
			    background: #eef7ff;
			    border-radius: 50px 50px;
			    margin-left: 30%;
			    margin-top: 25px;
			}
			.page{
				width: 100%;
				height: 100%;
				position:absolute;
				z-index: 1;
			}
			.success{
				width: 100%;
				height: 100%;
				position:absolute;
				z-index: 2;
				background:rgba(0,0,0,0.7);
			}
			.fail{
				width: 100%;
				height: 100%;
				position:absolute;
				z-index: 2;
				/*background:rgba(0,0,0,0.7);*/
			}
			.fail .fail_title{
				width: 80%;
				height: 40px;
				color: #000000;
				line-height: 40px;
				/*margin-left: 5%;*/
				margin:5% 0 5% 10%;
				text-align: center;
				background:#eef7ff;
				border-radius: 50px 50px;
				font-size: 16px;
				letter-spacing: 2px;
			}
			.content p{
				font-size: 14px;
				letter-spacing: 1px;
			}
			.footer{
				/*position: absolute;*/
				bottom: 100px;
			}
			.mui-btn-block{
				width: 80%;
				margin-left: 10%;
				padding: 8px 0;
				border-radius: 10px;
			}
			.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
				left:8px;
				top:8px;
			}
			.mui-checkbox label, .mui-radio label{
				font-size: 14px;
				padding-left: 38px;
			}
	.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
			font-size: 24px;
		
	}
	.mui-input-group{
		background: rgba(0,0,0,0);
	}
	.mui-input-group:before{
		background: rgba(0,0,0,0);
	}
	.mui-input-group .mui-input-row:after{
		background: rgba(0,0,0,0);
	}
	.mui-input-group:after{
		background: rgba(0,0,0,0);
	}
	.success .icon{
		width: 100px;
		height: 100px;
		border-radius: 100% 100%;
		background: #3Baba0;
		position:relative;
		left: 50%;
		margin-left: -50px;
		top: 15%;
	}
	.success p{
		color: #ffffff;
		padding: 5px 0; 
		font-size: 18px;
		letter-spacing: 2px;
	}
	.success p.p1{
		margin-top: 35%;
	}
	.success p.p3{
		font-size: 14px;
		margin-top: 10%;
	}


	.question .question_type{
		display: inline-block;
		width: 40px;
		height: 18px;
		color: #ffffff;
		font-size: 12px;
		text-align: center;
		line-height: 18px;
		background:#258cec;
		border-radius: 5px 5px 5px 1px;
	}
	.fail .h_line{
		width: 100%;
		border-bottom: 1px dashed #dddddd;
		}
	.fail p.question{
		margin-top: 20px;
	}	
	.mui-checkbox input[type=checkbox]:checked:before {
    	content: '\e442';
	}	
	.mui-radio input[type=radio]:checked:before{
		content: '\e442';
	}
	.mui-input-group .mui-input-row{
		height:auto!important;
	}
	</style>
	</head>

	<body>
		<div class="page">
			<div class="header">
				<p class="header_title t-c">第<span class="currentQuestion">5</span>/8题</p>
			</div>
			<div class="content">
				<form class="mui-input-group mui-input-group0">
					<p class="question"><span class="question_type">多选</span><span class="question_content">1.城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右。</span></p>
					<div class="many_choose">
						<div class="mui-input-row mui-checkbox mui-left">
							<label>A.7%城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右</label>
							<input name="checkbox" value="Item 1" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>B.10%城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右</label>
							<input name="checkbox" value="Item 1" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>C.13%城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右</label>
							<input name="checkbox" value="Item 1" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>D.16%</label>
							<input name="checkbox" value="Item 1" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>E.19%</label>
							<input name="checkbox" value="Item 1" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>F.21%</label>
							<input name="checkbox" value="Item 1" type="checkbox" >
						</div>
					</div>
					<div class="one_choose" style="display: none;">
						<p class="question"><span class="question_type">单选</span><span class="question_content">1.城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右。</span></p>
						<div class="mui-input-row mui-radio mui-left">
							<label>A.是</label>
							<input name="radio" value="Item 1" type="radio" >
						</div>
						<div class="mui-input-row mui-radio mui-left">
							<label>B.否</label>
							<input name="radio" value="Item 1" type="radio" >
						</div>
					</div>
				</form>
			</div>
			<div class="footer">
				<button onclick="next_problem()" type="button" class="mui-btn mui-btn-primary mui-btn-block" id="next_problem">下一题</button>
				<button onclick="submit()" type="button" class="mui-btn mui-btn-primary mui-btn-block" id="submit" style="display:none;">提交</button>
			</div>
        </div>

		<div class="success" style="display: none;">
			<div class="icon">
			</div>
			<p class="p1 t-c">恭喜您全部回答正确</p>
			<p class="p2 t-c">完善信息后您将获取一次抽奖资格</p>
			<p class="p3 t-c" id="count_down"><span style="font-size:18px;">&nbsp;3&nbsp;</span>秒后验证个人消息</p>
		</div>

		<div class="fail" style="display: none;">
			<p class="fail_title">以下是本次答错题目及正确答案</p>
			<form class="mui-input-group mui-input-group0" style="padding: 0 15px;">
				<p class="question"><span class="question_type">单选</span>1.城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右。</p>
				<div class="mui-input-row mui-radio mui-left">
					<label>A.是</label>
					<input name="radio" value="Item 1" checked type="radio" disabled >
				</div>
				<div class="mui-input-row mui-radio mui-left">
					<label>B.否</label>
					<input name="radio" value="Item 1" type="radio" disabled>
				</div>
				<div class="h_line"></div>
				<p class="question"><span class="question_type">多选</span>1.城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右。</p>
				<div class="mui-input-row mui-radio mui-left">
					<label>A.是</label>
					<input name="radio1" value="Item 1" checked type="radio" disabled >
				</div>
				<div class="mui-input-row mui-radio mui-left">
					<label>B.否</label>
					<input name="radio2" value="Item 1" type="radio" disabled>
				</div>
				<div class="mui-input-row mui-radio mui-left">
					<label>B.否</label>
					<input name="radio3" value="Item 1" type="radio" disabled>
				</div>
				<div class="mui-input-row mui-radio mui-left">
					<label>B.否</label>
					<input name="radio4" checked value="Item 1" type="radio" disabled>
				</div>
				<div class="mui-input-row mui-radio mui-left">
					<label>B.否</label>
					<input name="radio5" checked value="Item 1" type="radio" disabled>
				</div>
				<div class="h_line"></div>
				<button onclick="reAnswer()" type="button" class="mui-btn mui-btn-primary mui-btn-block" id="next_problem">重新答题</button>
			</form>	
			<p class="t-c" style="color：#999999">注：选择重新答题，若全部答对可获得抽奖资格</p>
		</div>
		<script>
			var x=4; //利用了全局变量来执行 
			function go(){ 
				x--; 
				if(x>0){ 
					$("#count_down").find("span").html(x); //每次设置的x的值都不一样了。 
				}else{ 
					window.location.href='../verification/verification.html'; 
					} 
			}
			 //下一步
			function next_problem(){
				// true 为多选 false为单选
				var flag=true;
				if(answer==""){
					 mui.alert('您还没有选择答案\n\r不能进行下一题', '', function() {
						// info.innerText = '你刚关闭了警告框';
					});
					
			    }else{
			    	var currentQuestion=Number($("span.currentQuestion").html());
			    	++currentQuestion;
			    	if(flag&&currentQuestion<8){
			    		$("span.currentQuestion").html(currentQuestion);
			    		$(".question .question_content").html(currentQuestion+"."+"城镇职工基本医疗保险统筹基金的其付标准原则上控制在当地职工年平均工资的()左右11。");
				    }else{
				    	$("span.currentQuestion").html(currentQuestion);
				    }
				    if(currentQuestion==8){
				    	$("#submit").css("display","block");
				    	$("#next_problem").css("display","none");
				    }
				}
			    
			    console.log(answer)
			}
			// 提交
			function submit(){
				 if(answer==""){
				 mui.alert('您还没有选择答案\n\r不能进行提交', '', function() {
					// info.innerText = '你刚关闭了警告框';
				});}else{
				 	var accuracyRate="100%";
					if(accuracyRate!=="100%"){
						$(".page").css("display","none");
						$(".fail").css("display","block");
					}else{
						$(".success").css("display","block");
						setInterval(go, 1000); 
					}
				 }
				
			}
			// 重新答题
			function reAnswer(){
				window.location.href="../index.html";
			}
			// // 正确答案
			var answer=[];
			mui('.mui-input-group').on('change', 'input', function() {  
			    var value = this.checked?"true":"false";  
			    var currentValue=this.previousElementSibling.innerText;
			    if(value=="true"){
			    	answer.push(currentValue);
			    }else{
			    	var pos = answer.indexOf(currentValue);
			    	if (pos < 0){
					answer.push(currentValue)
					} else {
					answer.splice(pos, 1)
					}
			    }
			    // 最后答案
			    // console.log(answer)
			});
		</script>	
	</body>

</html>